<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="行动项任务管理" data-page-identification="b_i0ulzydmfj">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_wpvhspioao 自定义模板_dpi21hcb5d -->
      <!--审批详情-->
      <a-modal @cancel="statuState.visible = false" centered :visible="statuState.visible" title="审批详情" :footer="null" :body-style="{ maxHeight: '700px', overflowY: 'auto' }" width="400px">
        <div class="status-item" v-for="(item, index) in statuState.list">
          <div class="title-new-status">
            <div class="left-title"
              >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
            >
            <div class="right-title"
              >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
            >
          </div>
          <a-steps class="status-step" direction="vertical">
            <a-step
              v-for="(inside, index) in item.processTaskList"
              :title="inside.nodeMessage"
              :description="inside.taskName + ':' + inside.assignUserName"
              :status="getIconStatus(inside.nodeStatus)"
            />
          </a-steps>
        </div>
      </a-modal>

      <!--审批详情-->
      <a-modal :visible="urgeState.visible" title="请确认" @ok="confirmUrge" centered @cancel="urgeState.visible = false"> 是否对该行动项任务进行催办 </a-modal>
      <!--催办-->
      <a-modal :visible="scoreState.visible" title="加减分详情" :footer="null" width="1000px" @cancel="scoreState.visible = false" centered :body-style="{ paddingTop: '16px' }">
        <div class="score-title-first">
          <ExclamationCircleOutlined style="color: orange; margin-right: 8px" />已结算的任务不支持通过编辑修改是否扣分，请联系相关领导通过员工绩效页面做修正加减分处理
        </div>
        <div class="score-table" v-if="scoreState.type === '项目总监'">
          <div class="score-title"
            >项目总监加减分总和：<span
              :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
              >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
            >
          </div>

          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
              >{{ item.month }}月绩效结算明细
              <span class="month-score"
                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="actionState.labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '项目经理'">
          <div class="score-title"
            >项目经理加减分总和：<span
              :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
              >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
            >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
              >{{ item.month }}月绩效结算明细
              <span class="month-score"
                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="actionState.labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '负责人'">
          <div class="score-title"
            >项目负责人和任务执行人加减分总和：<span
              :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
              >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
            >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
              >{{ item.month }}月绩效结算明细
              <span class="month-score"
                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="actionState.labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
      </a-modal>
      <div class="top">
        <a-form>
          <a-row style="height: 40px">
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="工厂/项目名称" :label-col="{ span: 8 }">
                <a-select
                  v-model:value="actionState.filter.projectTreeFormList"
                  show-search
                  style="width: 100%"
                  mode="multiple"
                  allow-clear
                  :options="actionState.searchList"
                  :field-names="{ label: 'projectName', value: 'projectId' }"
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  @focus="getSearchList"
                />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="计划结束时间" :label-col="{ span: 8 }">
                <a-date-picker style="width: 100%" v-model:value="actionState.filter.endTime" valueFormat="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="任务负责人" :label-col="{ span: 8 }">
                <a-select
                  v-model:value="actionState.filter.taskOwner"
                  allowClear
                  showSearch
                  :options="peopleList"
                  :field-names="{ label: 'label', value: 'value' }"
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="任务状态" :label-col="{ span: 8 }">
                <a-select
                  v-model:value="actionState.filter.taskStatusList"
                  mode="multiple"
                  :maxTagCount="1"
                  showArrow="true"
                  allowClear
                  showSearch
                  :options="[
                                        { label: '未启动', value: '未启动' },
                                        { label: '进行中', value: '进行中' },
                                        { label: '完成', value: '完成' },
                                        { label: '延期', value: '延期' },
                                        { label: '延期完成', value: '延期完成' },
                                        { label: '审批中', value: '审批中' }
                                    ]"
                />
              </a-form-item>
            </a-col>

            <a-col :span="4" style="height: 32px; margin-top: 16px">
              <a-space size="middle" style="margin-left: 16px">
                <a-button type="primary" class="mr16 ml10 task-fill-btn" @click="getAction"> 查询 </a-button>
                <a-button class="task-no-btn" type="primary" ghost @click="reset"> 重置 </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="bottom-table">
        <div class="milepost-title">
          <div style="width: 50%; margin-left: 8px">行动项任务列表</div>
          <div
            ><a-button type="ghost" style="color: #3875ff" @click="handlerAddAction">
              <template #icon><PlusOutlined /></template>
              新建</a-button
            ></div
          >
        </div>
        <a-table
          bordered
          rowKey="taskId"
          :loading="actionState.tableLoading"
          :columns="actionState.columns"
          :data-source="actionState.dataList"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          :scroll="{ x: scrollX, y: '550px' }"
          @resizeColumn="handleTaskResizeColumn"
          :pagination="pagination"
          :total="pagination.total"
        >
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'projectNames'">
              <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                <template #title>
                  <p v-for="(item, index) in handlerGetSpace(record.projectNames)" :key="index" style="color: #262626; margin: 0">{{ item }}</p>
                </template>
                {{ text }}
              </a-tooltip>
            </template>
            <!--                                新-任务进度-->
            <template v-if="column.dataIndex === 'taskSchedule'">
              <a-progress
                :percent="record.taskSchedule"
                status="active"
                @click="
                                    changeTaskSchedule(
                                        record.finishPermission,
                                        record.taskSchedule,
                                        record.taskId,
                                        record.taskStatus
                                    )
                                "
              />
            </template>
            <!--                                end新-任务进度-->
            <!-- 新-审核标准字段 -->

            <!-- 审核标准 -->
            <template v-if="column.dataIndex === 'unclosedRiskNumber' || column.dataIndex === 'riskNumber'">
              <a
                @click="
                                    handlerShowRisks(
                                        record.actionTaskId,
                                        column.dataIndex === 'unclosedRiskNumber' ? '未关闭' : '全部'
                                    )
                                "
              >
                {{ text }}
              </a>
            </template>
            <!--                          完成标准-->
            <template v-if="column.dataIndex === 'finishStandard'">
              <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                <template #title>
                  <p v-for="(item, index) in handlerGetSpace(record.finishStandard)" :key="index" style="color: #262626; margin: 0">{{ item }}</p>
                </template>
                <div class="finish-standard">{{ text }}</div>
              </a-tooltip>
            </template>
            <!--                          完成标准-->
            <!-- 附件模板 -->

            <template v-if="column.dataIndex === 'milepostName'">
              {{ text }}
            </template>
            <!--                                SOP-->
            <!--                                SOP-->
            <!-- 完成标准 -->

            <!-- 倒计时 -->
            <template v-if="column.dataIndex === 'countDown'">
              <div class="count-down-content">
                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff" v-if="shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[0]">
                  <template #title>
                    <div class="count-down-hover">
                      <p v-for="(item, index) in record.hoverLabelList" :key="index">{{
                          item
                      }}</p>
                    </div>
                  </template>
                  <div class="count-down"
                    >{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                      )[0]


                    }}:<span class="weight-num">{{
                        splitStringByColon(
                          shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                        )[1]
                    }}</span></div
                  >
                </a-tooltip>
                <div v-if="shouldDisplayCountDownWithTooltip(record.labelList, '延期')[0]" class="extension-color">
                  {{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                    )[0]


                  }}:<span class="weight-num">{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                    )[1]
                  }}</span>
                </div>

                <div
                  v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[0]"
                  :class="{
                                        'all-group-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                        ),
                                        'all-group-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                        )
                                    }"
                  @click="showScore(record.projectDirectorLabelList, '项目总监')"
                  >{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                    )[0]


                  }}:<span class="weight-num">{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                      )[1]
                  }}</span></div
                >

                <div
                  v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[0]"
                  :class="{
                                        'pm-score-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                        ),
                                        'pm-score-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                        )
                                    }"
                  @click="showScore(record.pmLabelList, '项目经理')"
                  >{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                    )[0]


                  }}:<span class="weight-num">{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                      )[1]
                  }}</span></div
                >

                <div
                  v-if="shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[0]"
                  :class="{
                                        'ower-score-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                        ),
                                        'ower-score-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                        )
                                    }"
                  @click="showScore(record.taskOwnerLabelList, '负责人')"
                  >{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                    )[0]


                  }}:<span class="weight-num">{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                      )[1]
                  }}</span></div
                >
              </div>
            </template>
            <!-- 倒计时 -->
            <template v-if="column.dataIndex === 'taskStatus'">
              <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14">延期完成</div>
                <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                <div v-else>{{ text }}</div>
              </div>
            </template>
            <template v-if="column.dataIndex === 'ppmEnclosureInfoList'">
              <!--                                  预览/下载-->
              <div v-for="(item, index) in record.ppmEnclosureInfoList" :key="index">
                <a-dropdown>
                  <span
                    style="
                                            overflow: hidden;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            display: block;
                                        "
                    :title="item.name"
                  >
                    {{ item.name }}
                  </span>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a-button style="width: 100%" type="link" size="small" @click="handlerDownload(item)">下载</a-button>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </div>
              <!--                                  预览/下载-->
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <a-button size="small" v-if="!record.taskExamStatus" type="link" @click="handleActionStart(record)"> 开始 </a-button>
              <a-button
                size="small"
                v-else
                type="link"
                @click="actionBeforeOk(record)"
                :disabled="
                                    record.taskStatus === '审批中' ||
                                    record.taskStatus === '完成' ||
                                    record.taskStatus === '延期完成'
                                "
              >
                完成
              </a-button>
              <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
              <a-button
                size="small"
                type="link"
                @click="handlerEditAction(record)"
                :disabled="
                                    record.taskStatus === '审批中' ||
                                    record.taskStatus === '完成' ||
                                    record.taskStatus === '延期完成'
                                "
              >
                编辑
              </a-button>
              <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />

              <a-dropdown>
                <a-button size="small" type="link"> 更多</a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a-popconfirm
                        title="确定要删除吗？"
                        @confirm="handlerDeleteAction(record)"
                        :disabled="
                                                    record.taskStatus === '审批中' ||
                                                    record.taskStatus === '完成' ||
                                                    record.taskStatus === '延期完成'
                                                "
                      >
                        <a-button
                          size="small"
                          :disabled="
                                                        record.taskStatus === '审批中' ||
                                                        record.taskStatus === '完成' ||
                                                        record.taskStatus === '延期完成'
                                                    "
                          type="link"
                          >删除</a-button
                        >
                      </a-popconfirm>
                    </a-menu-item>
                    <a-menu-item>
                      <a-button
                        size="small"
                        :disabled="
                                                    record.taskStatus === '审批中' ||
                                                    record.taskStatus === '完成' ||
                                                    record.taskStatus === '延期完成'
                                                "
                        type="link"
                        @click="handlerUrge(record)"
                      >
                        催办
                      </a-button>
                    </a-menu-item>
                    <a-menu-item>
                      <a-button size="small" type="link" @click="warningAction(record)"> 预警 </a-button>
                    </a-menu-item>
                    <a-menu-item>
                      <a-button size="small" type="link" :disabled="record.disabledNoteBtn" @click="handlerShowActionNotes(record)"> 历史备注 </a-button>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </template>
        </a-table>
        <a-modal
          :visible="actionState.addOrEditActionVisible"
          :title="actionState.title"
          destroyOnClose
          centered
          width="50%"
          :ok-button-props="{ loading: okLoading }"
          :body-style="{ maxHeight: '850px', overflow: 'auto' }"
          @cancel="actionStateCancel"
          @ok="handleSubmitAction"
          :maskClosable="false"
        >
          <a-form ref="actionFormRef" :model="actionState.actionList">
            <div v-for="(item, index) in actionState.actionList" :key="index" class="form-item">
              <div class="form-content-action">
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="工厂/项目名称"
                      :name="[index, 'projectName']"
                      :rules="[
                                                { required: true, message: '请选择工厂/项目名称!', trigger: 'blur' }
                                            ]"
                    >
                      <a-tree-select
                        v-model:value="actionState.actionList[index].projectName"
                        show-search
                        style="width: 100%"
                        placeholder="请选择"
                        allow-clear
                        :tree-data="actionState.treeData"
                        :fieldNames="{
                                                    children: 'children',
                                                    label: 'projectName',
                                                    value: 'projectId',
                                                    key: 'projectId'
                                                }"
                        @change="treeChange"
                        :max-tag-count="1"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="行动项任务名称" :name="[index, 'actionTaskName']" :rules="{ required: true, message: '请输入行动项任务名称!' }">
                      <a-input placeholder="请输入行动项任务名称" v-model:value="actionState.actionList[index].actionTaskName" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row v-if="actionState.isproject">
                  <a-col :span="12">
                    <a-form-item label="项目阶段">
                      <a-select
                        allow-clear
                        placeholder="请选择项目阶段"
                        v-model:value="actionState.actionList[index].milepostId"
                        :field-names="{ label: 'milepostName', value: 'milepostId' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.milepostName
                                                                .toLowerCase()
                                                                .indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                        :options="actionState.milepostList"
                        showSearch
                        @change="actionMchange(index)"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="任务名称">
                      <a-select
                        allow-clear
                        placeholder="请选择任务名称"
                        v-model:value="actionState.actionList[index].taskId"
                        :field-names="{ label: 'taskName', value: 'taskId' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.taskName
                                                                .toLowerCase()
                                                                .indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                        :options="actionState.taskList"
                        showSearch
                        @focus="getActionTask(actionState.actionList[index].milepostId)"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="12">
                    <a-form-item label="任务起止时间" :name="[index, 'allTime']" :rules="{ required: true, message: '请选择任务起止时间!' }">
                      <a-range-picker style="width: 100%" v-model:value="actionState.actionList[index].allTime" valueFormat="YYYY-MM-DD" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="任务负责人" :name="[index, 'taskOwner']" :rules="{ required: true, message: '请选择任务负责人!' }">
                      <a-select
                        placeholder="请选择任务负责人"
                        v-model:value="actionState.actionList[index].taskOwner"
                        showSearch
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="审核员" :name="[index, 'assessorName']" :rules="{ required: true, message: '请选择审核员!' }">
                      <a-select
                        placeholder="请选择审核员"
                        v-model:value="actionState.actionList[index].assessorName"
                        showSearch
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="PMO" :name="[index, 'projectManagementOffice']" :rules="{ required: true, message: '请选择PMO!' }">
                      <a-select
                        placeholder="请选择PMO"
                        v-model:value="actionState.actionList[index].projectManagementOffice"
                        showSearch
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="one-line">
                  <a-col :span="24">
                    <a-form-item label="任务执行人" :name="[index, 'taskParticipantList']" :rules="{ required: true, message: '请选择任务执行人!' }">
                      <a-select
                        placeholder="请选择任务执行人"
                        v-model:value="actionState.actionList[index].taskParticipantList"
                        showSearch
                        mode="multiple"
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                  <a-col v-if="taskPeopleList && taskPeopleList.length > 0">
                    <div style="width: 700px; margin-left: 115px; margin-bottom: 28px">
                      <a href="javascript:;" v-for="(item, num) in taskPeopleList" @click="handlerAddActionPeople(item.value, index)"
                        ><span style="margin: 0 5px">{{ item.value }}</span></a
                      >
                    </div>
                  </a-col>
                </a-row>
                <a-row class="one-line">
                  <a-col :span="24">
                    <a-form-item :wrapper-col="{ span: 24 }" name="finishStandard" label="完成标准">
                      <a-textarea :maxlength="1000" :rows="3" v-model:value="actionState.actionList[index].finishStandard" placeholder="请输入" />
                    </a-form-item>
                    <div class="tips" style="margin-top: -4px">
                      请用”；“号区分不同细项的内容，格式参考：<br />
                      1）设计反讲机制及频率、并执行；<br />
                      2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
                    </div>
                  </a-col>
                </a-row>
                <a-row class="one-line">
                  <a-col :span="24">
                    <a-form-item label="备注">
                      <a-textarea placeholder="请输入备注" v-model:value="actionState.actionList[index].description" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="one-line" v-if="actionState.title === '编辑行动项任务'">
                  <a-col :span="24">
                    <a-form-item label="变更原因" :rules="{ required: true, message: '请输入变更原因!', trigger: 'blur' }" :name="[index, 'reasonsChange']">
                      <a-textarea placeholder="请输入变更原因" v-model:value="actionState.actionList[index].reasonsChange" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <!--                            <a-->
              <!--                                v-if="!actionState.current.actionTaskId && actionState.isTaskAdd === false"-->
              <!--                                class="del"-->
              <!--                                @click="handlerDeleteActionItem(index)"-->
              <!--                                >删除</a-->
              <!--                            >-->
            </div>
          </a-form>
          <!--                    <a-button-->
          <!--                        v-if="!actionState.current.actionTaskId && actionState.isTaskAdd === false"-->
          <!--                        type="primary"-->
          <!--                        ghost-->
          <!--                        class="add-btn"-->
          <!--                        @click="handlerAddActionItem"-->
          <!--                    >-->
          <!--                        <plus-outlined />-->
          <!--                        添加-->
          <!--                    </a-button>-->
        </a-modal>

        <!-- 行动项完成 -->
        <a-modal
          :visible="actionState.actionOkVisible"
          title="完成行动项任务"
          destroyOnClose
          centered
          width="40%"
          @cancel="actionState.actionOkVisible = false"
          @ok="handlerSubAction"
          :ok-button-props="{ loading: confirmLoading }"
        >
          <div style="margin-bottom: 10px; font-size: 16px; font-weight: 600"> 完成附件证明</div>
          <a-upload :file-list="actionState.fileList" :multiple="true" :before-upload="handlerActionUpload" @remove="handleActionRemove" accept=".xlsx,.ppt,.pdf,.PDF, image/*, .docx, .rp, .xls">
            <a-button type="primary">
              <upload-outlined />
              上传
            </a-button>
          </a-upload>
          <span>支持格式：image/*,.xlsx,.xls,.docx,.rp,.ppt,.pptx,.pdf</span>
        </a-modal>
        <!-- 行动项完成 -->
        <!--                      行动项历史备注-->
        <a-modal :visible="actionState.visibleNotes" title="历史备注" width="40vw" centered destroyOnClose :footer="null" @cancel="actionState.visibleNotes = false">
          <a-table
            bordered
            class="note-table"
            rowKey="taskId"
            :customRow="customRow"
            :columns="actionState.notesColumns"
            :data-source="actionState.noteData"
            :pagination="false"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          />
        </a-modal>
        <!--                      行动项历史备注-->
        <!--                      行动项-风险预警-->
        <a-modal v-model:visible="actionRisk.warrVisible" title="新增任务风险" @ok="actionRiskOk">
          <a-form :model="actionRisk" ref="actionRiskRef">
            <a-row>
              <a-col :span="24">
                <a-form-item label="任务名称" name="taskName" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                  <a-input v-model:value="actionRisk.taskName" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="风险描述" name="riskDescription" :rules="[{ required: true, message: '请输入风险描述', trigger: 'blur' }]">
                  <a-input v-model:value="actionRisk.riskDescription" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="解决方案" name="solution" :rules="[{ required: true, message: '请输入解决方案', trigger: 'blur' }]">
                  <a-input v-model:value="actionRisk.solution" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-modal>
        <a-modal :visible="actionState.visibleRisk" title="风险" width="80vw" centered destroyOnClose :footer="null" :getContainer="getModalContainer" @cancel="actionState.visibleRisk = false">
          <a-table
            class="risk-table"
            bordered
            rowKey="taskId"
            :customRow="customRow"
            :columns="actionState.riskColumns"
            :data-source="actionState.riskList"
            :pagination="false"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'operation'">
                <a-button type="link" :disabled="record.riskState === '关闭'" @click="handlerBeforeClose(record)">关闭</a-button>
              </template>
            </template>
          </a-table>
        </a-modal>
        <a-modal v-model:visible="stateF.previewVisible" @cancel="handleCancel" width="1000px" title="图片预览" :footer="null">
          <div v-if="stateF.isImagePreview">
            <img :src="stateF.previewImage" alt="附件" style="width: 100%" />
          </div>
          <div v-else>
            <iframe :src="stateF.previewFileUrl" style="width: 100%; height: 500px"></iframe>
          </div>
        </a-modal>
        <a-modal
          :visible="actionState.closeVisible"
          title="关闭风险"
          destroyOnClose
          centered
          width="40%"
          :ok-button-props="{ disabled: btnLoading }"
          @cancel="actionState.closeVisible = false"
          @ok="handlerClose"
        >
          <a-form ref="closeFormRef" :model="closeCurrent">
            <div class="form-content">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="风险关闭备注" name="riskRemarks" :rules="{ required: true, message: '请输入风险关闭备注!' }">
                    <a-textarea v-model:value="closeCurrent.riskRemarks" :rows="5" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-form>
        </a-modal>
      </div>
      <!-- end vid_wpvhspioao 自定义模板_dpi21hcb5d -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  const userInfoStorage = localStorage.getItem('al__USER_INFO')
      if (userInfoStorage) {
          try {
              const userInfo = JSON.parse(userInfoStorage)
          } catch (error) {
              console.log(error)
          }
      }
      onMounted(() => {
          get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/permission`).then(data => {
              if (data.code === 200) {
                  actionState.permission = true
              } else {
                  actionState.permission = false
              }
          })
          getAction()
      })
      const taskLeader = JSON.parse(userInfoStorage)
      const labelToolStyle = {
          maxWidth: '1000px'
      }
      // 分页方法
      const pageSizeChange = (current, size) => {
          pagination.value.current = current
          pagination.value.pageSize = size
          // getAction()
      }
      const pageChange = (page, pageSize) => {
          pagination.value.current = page
          pagination.value.pageSize = pageSize
          getAction()
      }
      const actionState = reactive({
          filter: {
              endTime: '',
              taskOwner: '',
              taskStatusList: [],
              projectTreeFormList: []
          },
          treeData: [],
          riskList: [],
          visibleRisk: false,
          labelCoulmn: [
              {
                  title: '加减分类型',
                  width: 120,
                  dataIndex: 'pointTypeName'
              },
              {
                  title: '加减分数',
                  width: 100,
                  dataIndex: 'taskPoints'
              },
              {
                  title: '加减分触发日期',
                  width: 200,
                  dataIndex: 'updateTime'
              },
              {
                  title: '是否扣分',
                  width: 120,
                  dataIndex: 'deductStatus'
              },
              {
                  title: '审批日期',
                  width: 200,
                  dataIndex: 'taskRectificationPointsTime'
              },
              {
                  title: '是否绩效结算',
                  width: 200,
                  dataIndex: 'settlementView'
              }
          ],
          permission: true,
          actionOkVisible: false,
          sopList: [],
          CompletionCheckListCheckList: [],
          ppmTemplateCheckList: [],
          fileList: [],
          addOrEditActionVisible: false,
          columns: [
              {
                  title: '工厂/项目名称',
                  dataIndex: 'projectNames',
                  resizable: true,
                  ellipsis: true,
                  width: '140px',
                  align: 'left'
                  // fixed: 'left',
              },
              {
                  title: '项目阶段',
                  dataIndex: 'milepostName',
                  resizable: true,
                  ellipsis: true,
                  width: '140px',
                  // fixed: 'left',
                  align: 'left'
              },

              {
                  title: '任务名称',
                  dataIndex: 'taskName',
                  ellipsis: true,
                  resizable: true,
                  width: '220px',
                  // fixed: 'left',
                  align: 'left'
              },
              {
                  title: '行动项任务名称',
                  dataIndex: 'actionTaskName',
                  ellipsis: true,
                  resizable: true,
                  width: '220px',
                  align: 'left'
              },
              {
                  title: '任务状态',
                  dataIndex: 'taskStatus',
                  resizable: true,
                  ellipsis: false,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: '任务进度',
                  dataIndex: 'taskSchedule',
                  resizable: true,
                  ellipsis: false,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: '倒计时及加减分',
                  dataIndex: 'countDown',
                  resizable: true,
                  ellipsis: false,
                  width: '250px',
                  align: 'center',
                  customCell: ({ rowSpan, rowIndex, aa }) => {
                      return {
                          style: {
                              padding: 0
                          }
                      }
                  }
              },
              {
                  title: '完成标准',
                  dataIndex: 'finishStandard',
                  resizable: true,
                  ellipsis: false,
                  width: '150px',
                  align: 'center'
              },
              {
                  title: '未关闭风险数量',
                  dataIndex: 'unclosedRiskNumber',
                  resizable: true,
                  ellipsis: false,
                  width: '150px',
                  align: 'center'
              },
              {
                  title: '附件',
                  dataIndex: 'ppmEnclosureInfoList',
                  resizable: true,
                  ellipsis: true,
                  width: '200px',
                  align: 'center'
              },
              {
                  title: '任务负责人',
                  dataIndex: 'taskOwner',
                  resizable: true,
                  ellipsis: true,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: '审核员',
                  dataIndex: 'assessorName',
                  resizable: true,
                  ellipsis: true,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: 'PMO',
                  dataIndex: 'projectManagementOffice',
                  resizable: true,
                  ellipsis: true,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: '任务执行人',
                  resizable: true,
                  dataIndex: 'taskParticipantStr',
                  ellipsis: true,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: '计划开始',
                  dataIndex: 'startTime',
                  resizable: true,
                  ellipsis: true,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: '实际开始',
                  dataIndex: 'examPassTime',
                  resizable: true,
                  ellipsis: true,
                  width: '140px',
                  align: 'center'
              },
              {
                  title: '计划完成',
                  dataIndex: 'endTime',
                  ellipsis: true,
                  width: '120px',
                  resizable: true,
                  align: 'center'
              },
              {
                  title: '	实际完成',
                  dataIndex: 'taskFinishTime',
                  ellipsis: true,
                  resizable: true,
                  width: '120px',
                  align: 'center'
              },
              {
                  title: '计划工时(小时)',
                  dataIndex: 'workingHours',
                  resizable: true,
                  ellipsis: true,
                  width: '130px',
                  align: 'center'
              },
              {
                  title: '实际工时(小时)',
                  dataIndex: 'actualWorkHours',
                  resizable: true,
                  ellipsis: true,
                  width: '130px',
                  align: 'center'
              },
              {
                  title: '工时投入状态',
                  dataIndex: 'stateInput',
                  resizable: true,
                  ellipsis: true,
                  width: '120px',
                  align: 'center'
              },
              {
                  title: '操作',
                  dataIndex: 'operation',
                  width: '180px',
                  align: 'center',
                  fixed: 'right'
              }
          ],
          tableLoading: false,
          spinning: false,
          actionList: [],
          actionListItem: {
              taskName: undefined,
              milepostId: undefined,
              taskId: undefined,
              actionTaskName: undefined,
              taskOwner: undefined,
              assessorName: undefined,
              projectManagementOffice: taskLeader.value.name,
              startTime: undefined,
              endTime: undefined,
              allTime: [],
              taskParticipantList: [],
              description: undefined,
              workingHours: undefined,
              parentId: undefined,
              reasonsChange: undefined,
              projectName: undefined,
              finishStandard: ''
          },
          isTaskAdd: false,
          current: {},
          // 项目阶段
          milepostList: [],
          taskList: [],
          notesColumns: [
              { title: '备注内容', dataIndex: 'content', align: 'center' },
              { title: '提交人', dataIndex: 'createdBy', align: 'center' },
              { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
          ],
          noteData: [],
          visibleNotes: false,
          isproject: false,
          riskColumns: [
              { title: '风险描述', dataIndex: 'riskDescription', width: '300px', align: 'center' },
              { title: '解决方案', dataIndex: 'solution', align: 'center' },
              { title: '风险状态', dataIndex: 'riskState', align: 'center' },
              { title: '提交人', dataIndex: 'createdBy', align: 'center' },
              { title: '提交时间', dataIndex: 'createdTime', align: 'center' },
              { title: '解决人', dataIndex: 'solver', align: 'center' },
              { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' },
              { title: '操作', dataIndex: 'operation', align: 'center' }
          ],

          closeVisible: false,
          searchList: []
      })
      const pagination = ref({
          current: 1,
          pageSize: 20,
          showSizeChanger: true,
        showQuickJumper:true,
          total: '0',
          pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
          showTotal: total => `共 ${total} 个项目 第${pagination.value.current}/${Math.ceil(pagination.value.total/pagination.value.pageSize)}页`,
          onShowSizeChange: pageSizeChange,
          onChange: pageChange,
      })
      function getSearchList() {
          get('/solution-ppm/api/v2/built-in-system-ppm/action_task/parent_project_list').then(data => {
              actionState.searchList = data.data
          })
      }

      // 获取树
      function getTree() {
          get('/solution-ppm/api/v2/built-in-system-ppm/action_task/project_tree').then(data => {
              actionState.treeData = data.data
          })
      }

      getTree()

      // 获取项目阶段
      function getActionMilepostList(id) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${id}/milepost_name/list`).then(data => {
              actionState.milepostList = data.data.dataList
          })
      }

      // 根据项目阶段查任务
      function getActionTask(id) {
          post('/solution-ppm/api/v2/built-in-system-ppm/action_task/task_list', {
              milepostId: id
          }).then(data => {
              actionState.taskList = data.data
          })
      }

      function actionMchange(index) {
          actionState.actionList[index].taskId = undefined
      }

      const searchTree = computed(() => {
          const findNode = (nodes, value) => {
              for (let node of nodes) {
                  if (node.projectId === value) {
                      return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
                  }
                  if (node.children && node.children.length > 0) {
                      const result = findNode(node.children, value)
                      if (result) {
                          return result
                      }
                  }
              }
              return null
          }

          // 检查 projectTreeFormList 是否存在并且是数组
          if (Array.isArray(actionState.filter.projectTreeFormList)) {
              return actionState.filter.projectTreeFormList
                  .map(value => findNode(actionState.treeData, value))
                  .filter(item => item !== null)
          } else {
              return [] // 如果 projectTreeFormList 不存在或不是数组，返回空数组
          }
      })

      //     获取行动项
      function getAction() {
          actionState.tableLoading = true
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/0`, {
              endTime: actionState.filter.endTime,
              taskOwner: actionState.filter.taskOwner,
              taskStatusList: actionState.filter.taskStatusList,
              projectTreeFormList: searchTree.value,
              pageNo: pagination.value.current,
              pageSize: pagination.value.pageSize
          })
              .then(data => {
                  if (data.code === 200) {
                      actionState.dataList = data.data.dataList
                      actionState.current = {}
                      pagination.value.total = data.data.totalElements
                  } else {
                      message.error(data.message)
                      actionState.dataList = []
                  }
              })
              .finally(() => {
                  actionState.tableLoading = false
              })
      }

      function reset() {
          actionState.filter = {
              endTime: '',
              taskOwner: '',
              taskStatusList: [],
              projectName: []
          }
          pagination.value.current = 1
          getAction()
      }

      function groupActionData(data) {
          let currentMilepostName = ''
          let currentTaskName = ''

          return data.map((item, index) => {
              if (currentMilepostName !== item.milepostName) {
                  currentMilepostName = item.milepostName
                  item.milepostNameSpan = calculateSpan(data, index, 'milepostName', currentMilepostName)
              } else {
                  item.milepostNameSpan = 0
              }

              if (currentTaskName !== item.taskName) {
                  currentTaskName = item.taskName
                  item.taskNameSpan = calculateSpan(data, index, 'taskName', currentTaskName)
              } else {
                  item.taskNameSpan = 0
              }

              return item
          })
      }

      function calculateSpan(data, index, property, value) {
          let span = 0
          for (let i = index; i < data.length; i++) {
              if (data[i][property] === value) {
                  span += 1
              } else {
                  break
              }
          }
          return span
      }

      const peopleList = ref([])

      // 交付参与人s所有人
      function getAllJfPeople() {
          get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(({ data }) => {
              peopleList.value = data.userDtoList.map(item => {
                  return {
                      label: item.name,
                      value: item.name
                  }
              })
          })
      }

      getAllJfPeople()
      const actionFormRef = ref(null)

      function handlerAddAction() {
          if (actionState.permission === false) {
              message.error('暂无权限进行此操作')
          } else {
              actionState.actionList = []
              actionState.actionList.push({ ...actionState.actionListItem })

              actionState.title = '新建行动项任务'
              actionState.addOrEditActionVisible = true
          }
      }

      const taskPeopleList = ref([])

      function getPopleList() {
          post(`/solution-ppm/api/v2/built-in-system-ppm/task/getTopUser/${projectId.value}`).then(data => {
              taskPeopleList.value = data.data.map(item => {
                  return {
                      label: item,
                      value: item
                  }
              })
          })
      }

      // function handlerDeleteActionItem(index) {
      //     actionState.actionList.splice(index, 1)
      // }
      //
      // function handlerAddActionItem(index) {
      //     actionState.actionList.push({ ...actionState.actionListItem })
      // }
      const okLoading = ref(false)

      // 行动项保存
      function handleSubmitAction() {
          if (actionState.actionList.length < 1) {
              message.info('至少添加一条')
          } else {
              actionFormRef.value.validate().then(() => {
                  okLoading.value = true
                  let params = Object.values(actionState.actionList).map(item => ({
                      ...item,
                      startTime: item.allTime[0],
                      endTime: item.allTime[1],
                      projectTreeFormList: selectedObjects.value
                  }))
                  if (actionState.title === '新建行动项任务') {
                      //   新建
                      post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/create`, params[0])
                          .then(data => {
                              if (data.code === 200) {
                                  message.success('新建成功')
                                  actionState.addOrEditActionVisible = false
                                  getAction()
                                  actionState.isproject = false
                              } else {
                                  message.error(data.message)
                              }
                          })
                          .finally(() => {
                              okLoading.value = false
                          })
                  } else {
                      //   编辑
                      put(
                          `/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/update`,
                          params[0]
                      )
                          .then(data => {
                              if (data.code === 200) {
                                  message.success('编辑成功')
                                  actionState.addOrEditActionVisible = false
                                  getAction()
                                  actionState.isproject = false
                              } else {
                                  message.error(data.message)
                              }
                          })
                          .finally(() => {
                              okLoading.value = false
                          })
                  }
              })
          }
      }

      const actionOkDisabled = ref(false)

      function actionBeforeOk(record) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
              data => {
                  if (data.code !== 200) {
                      message.error('暂无权限进行此操作')
                  } else {
                      if (record.unclosedRiskNumber > 0) {
                          message.info('该任务包含风险，请关闭风险后重试')
                      } else {
                          actionState.current = record
                          actionState.actionOkVisible = true
                      }
                  }
              }
          )
      }

      function handleActionStart(record) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
              data => {
                  if (data.code !== 200) {
                      message.error('暂无权限进行此操作')
                  } else {
                      actionState.current = record
                      put(
                          `/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/start`
                      ).then(data => {
                          if (data.code === 200) {
                              message.success('已开始该任务，请及时完成任务')
                              getAction()
                          } else {
                              message.error(data.message)
                          }
                      })
                  }
              }
          )
      }

      const confirmLoading = ref(false)

      // 完成行动项
      function handlerSubAction() {
          if (actionState.fileList.length < 1) {
              message.error('请上传附件')
          } else {
              confirmLoading.value = true
              put(`/solution-ppm/api/v2//built-in-system-ppm/action_task/${actionState.current.actionTaskId}/complete`, {
                  ppmEnclosureInfoList: actionState.fileList
              })
                  .then(data => {
                      if (data.code === 200) {
                          message.success('操作成功')
                          actionState.actionOkVisible = false
                          actionState.fileList = []
                      } else {
                          message.error(data.message)
                      }
                  })
                  .finally(() => {
                      confirmLoading.value = false
                  })
          }
      }

      function handlerDeleteAction(record) {
          if (actionState.permission === false) {
              message.error('暂无权限进行此操作')
          } else {
              actionState.current = record
              actionState.taskId = record.taskId
              del(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}`).then(
                  data => {
                      if (data.code === 200) {
                          message.success('删除成功')
                          getAction()
                      } else {
                          message.error(data.message)
                      }
                  }
              )
          }
      }

      function handlerShowActionNotes(record) {
          actionState.current = record
          get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/history`).then(
              data => {
                  if (data.code === 200) {
                      actionState.visibleNotes = true
                      actionState.noteData = data.data.dataList
                  } else {
                      message.error(data.message)
                  }
              }
          )
      }

      function handlerEditAction(record) {
          if (actionState.permission === false) {
              message.error('暂无权限进行此操作')
          } else {
              const cleepData = cloneDeep(record)
              console.log(cleepData)
              getTree()
              actionState.actionList = []
              actionState.title = '编辑行动项任务'
              cleepData.projectName = cleepData.projectTreeFormList
              if (cleepData.milepostId) {
                  actionState.isproject = true
                  getActionMilepostList(cleepData.projectTreeFormList[0])
                  getActionTask(cleepData.milepostId)
              }
              actionState.current = cleepData
              cleepData.allTime = [cleepData.startTime, cleepData.endTime]
              actionState.actionList.push(cleepData)

              actionState.addOrEditActionVisible = true
          }
      }

      function handlerActionUpload(file) {
          const data = new FormData()
          data.append('file', file)
          post('/file-storage/api/v1/file/upload', data).then(({ data: { fullUrl } }) => {
              if (data) {
                  actionState.fileList = [
                      ...actionState.fileList,
                      {
                          uid: file.uid,
                          lastModified: file.lastModified,
                          name: file.name,
                          size: file.size,
                          type: file.type,
                          status: 'done',
                          url: fullUrl
                      }
                  ]
              }
          })
          return false
      }

      // tooltip样式
      const standardStyle = {
          maxWidth: 'unset'
      }

      function handleActionRemove(file) {
          actionState.fileList = actionState.fileList.filter(item => item.uid !== file.uid)
      }

      function handlerAddActionPeople(name, index) {
          if (actionState.actionList[index].taskParticipantList.indexOf(name) !== -1) {
              actionState.actionList[index].taskParticipantList = actionState.actionList[
                  index
              ].taskParticipantList.filter(item => item !== name)
          } else {
              actionState.actionList[index].taskParticipantList.push(name)
          }
      }

      function actionStateCancel() {
          console.log('关闭')
          actionState.addOrEditActionVisible = false
          actionState.actionListItem.taskParticipantList = []
      }

      // 新行动项预警
      const actionRisk = reactive({
          warrVisible: false,
          taskName: undefined,
          solution: undefined,
          actionTaskId: undefined,
          projectId: undefined,
          milepostId: undefined
      })

      // 模板项目-风险预警
      function warningAction(record) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
              data => {
                  if (data.code === 200) {
                      console.log(record, 'record')
                      actionRisk.warrVisible = true
                      actionRisk.taskName = record.actionTaskName
                      actionRisk.riskDescription = record.riskDescription
                      actionRisk.solution = record.solution
                      actionRisk.actionTaskId = record.actionTaskId
                      actionRisk.projectId = record.projectId
                      actionRisk.milepostId = record.milepostId
                  } else {
                      message.error('暂无权限进行此操作')
                  }
              }
          )
      }

      const actionRiskRef = ref(null)

      function actionRiskOk() {
          actionRiskRef.value.validate().then(() => {
              const params = {
                  actionTaskId: actionRisk.actionTaskId,
                  projectId: actionRisk.projectId,
                  milepostId: actionRisk.milepostId,
                  riskDescription: actionRisk.riskDescription,
                  solution: actionRisk.solution
              }
              console.log(params, 'params')
              post('/solution-ppm/api/v2/built-in-system-ppm/action_task/warn', params).then(data => {
                  if (data.code === 200) {
                      message.success('操作成功')
                      actionRisk.warrVisible = false
                      getAction()
                  } else {
                      message.error(data.message)
                  }
              })
          })
      }

      const calculateTimeDifference = targetDate => {
          const targetDateTime = new Date(targetDate)
          const currentDateTime = new Date()
          const timeDifference = targetDateTime - currentDateTime
          const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24))

          return {
              days: days,
              result: `${days}天${Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}小时`
          }
      }

      function shouldDisplayCountDownWithTooltip(labelList, text) {
          const result = labelList?.filter(label => label.includes(text))
          if (result && result.length > 0) {
              return [true, result[0]]
          } else {
              return false
          }
      }

      function hasHyphen(str) {
          return str.includes('-')
      }

      function hasPlus(str) {
          return str.includes('+')
      }

      function splitStringByColon(inputString) {
          return inputString.split(':')
      }

      const shouldDisplayCountDown = targetDate => {
          const { days } = calculateTimeDifference(targetDate)
          return days >= 0 && days <= 7
      }

      function handleTaskResizeColumn(w, col) {
          col.width = w
      }

      // const treeChange = () => {
      //     if (actionState.actionList[0].projectName.length == 1) {
      //         // 判断是否是项目
      //         post(
      //             `/solution-ppm/api/v2/built-in-system-ppm/action_task/check`,
      //             actionState.actionList[0].projectName
      //         ).then(data => {
      //             actionState.isproject = data.data
      //             if (actionState.isproject) {
      //                 getActionMilepostList(actionState.actionList[0].projectName[0])
      //             }
      //         })
      //     } else {
      //         actionState.isproject = false
      //     }
      // }
      const treeChange = () => {
          actionState.actionList[0].milepostId = undefined
          actionState.actionList[0].taskId = undefined
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/check`, [
              actionState.actionList[0].projectName
          ]).then(data => {
              actionState.isproject = data.data
              if (actionState.isproject) {
                  getActionMilepostList(actionState.actionList[0].projectName)
              }
          })
      }
      // 计算属性，用于找到选中的节点并组成对象数组
      // const selectedObjects = computed(() => {
      //     const findNode = (nodes, value) => {
      //         for (let node of nodes) {
      //             if (node.projectId === value) {
      //                 return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
      //             }
      //             if (node.children) {
      //                 const result = findNode(node.children, value)
      //                 if (result) {
      //                     return result
      //                 }
      //             }
      //         }
      //         return null
      //     }
      //
      //     return actionState.actionList[0].projectName
      //         .map(value => findNode(actionState.treeData, value))
      //         .filter(item => item !== null)
      // })
      const selectedObjects = computed(() => {
          const findNode = (nodes, value) => {
              for (let node of nodes) {
                  if (node.projectId === value) {
                      return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
                  }
                  if (node.children) {
                      const result = findNode(node.children, value)
                      if (result) {
                          return result
                      }
                  }
              }
              return null
          }

          if (!actionState.actionList || !actionState.actionList[0] || !actionState.treeData) {
              return []
          }

          const projectNameValue = actionState.actionList[0].projectName

          if (!projectNameValue) {
              return []
          }

          // 将单一值转换为数组来处理
          const projectNameArray = Array.isArray(projectNameValue) ? projectNameValue : [projectNameValue]

          return projectNameArray.map(value => findNode(actionState.treeData, value)).filter(item => item !== null)
      })

      function getScore(arr) {
          let sum = 0
          if (arr) {
              arr.forEach(item => {
                  if (item.deductStatus === '是') {
                      sum += item.taskPoints || 0 // 如果 taskPoints 为 null 或者 undefined，将其视为 0
                  }
              })
          }
          return sum.toFixed(2)
      }

      function handlerShowRisks(id) {
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/warn_list/${id}`).then(data => {
              actionState.riskList = data.data
              actionState.current.actionTaskId = id
              actionState.visibleRisk = true
          })
      }

      const stateF = reactive({
          previewVisible: false,
          previewImage: '',
          previewFileUrl: '',
          isImagePreview: false
      })

      function previewAttachment(item) {
          // 检查附件类型
          if (item.type.startsWith('image')) {
              stateF.isImagePreview = true
              stateF.previewImage = item.url // 设置预览图片的URL
              stateF.previewVisible = true // 显示模态框
          } else {
              // stateF.isImagePreview = false;
              // // 如果是其他类型的文件，直接在模态框中显示
              // stateF.previewFileUrl = item.url; // 设置预览文件的URL
              message.info('目前仅支持图片预览')
          }
      }

      function handlerDownload({ url, name }) {
          function downBlob(blob) {
              const downloadElement = document.createElement('a')
              const href = window.URL.createObjectURL(blob) // 创建下载的链接
              downloadElement.href = href
              downloadElement.download = name // 下载后文件名
              document.body.appendChild(downloadElement)
              downloadElement.click() // 点击下载
              document.body.removeChild(downloadElement) // 下载完成移除元素
              window.URL.revokeObjectURL(href)
          }

          const data = new FormData()
          data.append('path', url)
          post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/downloadFile', data, {
              responseType: 'blob',
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              }
          })
              .then(blob => {
                  downBlob(blob)
              })
              .finally(() => {})
      }

      const closeCurrent = ref({
          dailyItemId: undefined,
          riskRemarks: ''
      })

      function handlerGetSpace(data) {
          return data?.split(/[,;；]/)
      }

      function handlerBeforeClose(record) {
          if (!record.pmoFlag) {
              message.info('暂无权限')
          } else {
              closeCurrent.value = {
                  id: record.id,
                  riskRemarks: '',
                  type: record.type
              }
              actionState.closeVisible = true
          }
      }

      const closeFormRef = ref(null)

      function handlerClose() {
          closeFormRef.value.validate().then(() => {
              post('/solution-ppm/api/v2/built-in-system-ppm/action_task/close_warn', closeCurrent.value)
                  .then(({ code, message: errMsg }) => {
                      if (code === 200) {
                          actionState.closeVisible = false
                          handlerShowRisks(actionState.current.actionTaskId)
                          message.success('操作成功')
                          getAction()
                      } else {
                          message.warning(errMsg || '操作失败')
                      }
                  })
                  .finally(() => {})
          })
      }

      // 加减分详情弹窗
      const scoreState = reactive({
          visible: false,
          scoreData: [],
          type: ''
      })

      function showScore(data, type) {
          console.log(data, type)
          scoreState.visible = true
          scoreState.scoreData = groupByBusinessDate(data)
          console.log(scoreState.scoreData, '格式化的分数')
          scoreState.type = type
      }

      function groupByBusinessDate(list, key = 'businessDate') {
          const grouped = list.reduce((acc, item) => {
              const groupKey = item[key]
              if (!acc[groupKey]) {
                  acc[groupKey] = {
                      month: groupKey,
                      data: []
                  }
              }
              acc[groupKey].data.push(item)
              return acc
          }, {})

          return Object.values(grouped)
      }

      function calculateTotalTaskPoints(data) {
          let totalTaskPoints = 0

          data.forEach(monthData => {
              monthData.data.forEach(record => {
                  if (record.deductStatus === '是') {
                      // 确保 taskPoints 是数字，并累加到 totalTaskPoints
                      const taskPoints = parseFloat(record.taskPoints)
                      if (!isNaN(taskPoints)) {
                          totalTaskPoints += taskPoints
                      }
                  }
              })
          })

          // 返回保留两位小数的结果
          return parseFloat(totalTaskPoints.toFixed(2))
      }

      const urgeState = reactive({
          visible: false,
          current: {}
      })

      //   催办
      function handlerUrge(record) {
          ;(urgeState.visible = true), (urgeState.current = record)
      }

      //   催办
      function confirmUrge() {
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/urging/${urgeState.current.actionTaskId}`).then(
              data => {
                  if (data.code === 200) {
                      message.success(data.message)
                      urgeState.visible = false
                  } else {
                      message.error(data.message)
                  }
              }
          )
      }

      const statuState = reactive({
          visible: false,
          list: []
      })
      function getTaskStatus(id, type) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
              data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  statuState.visible = true
                  statuState.list = data.data
              }
          )
      }

      const getIconStatus = status => {
          if (status === 'finish') {
              return 'finish'
          } else if (status === 'process') {
              return 'process'
          } else {
              return 'error'
          }
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  .top {
    padding: 0 20px;
    height: 64px;
    background-color: #fff;
    margin-bottom: 16px;
    border-bottom: 1px solid #d9d9d9;
  }
  .task-fill-btn {
    background: #3875ff;
    border-color: #3875ff;
  }
  .task-no-btn {
    color: #3875ff;
    border-color: #3875ff;
  }
  .bottom-table :deep(.@{ant-prefix}-table-thead) > tr {
    height: 40px;
  }

  :deep(.bottom-table .ant3-table-tbody > tr > td) {
    padding: 8px 8px;
  }
  /* 倒计时 */
  .count-down {
    border-radius: 1px;
    background: rgba(255, 123, 0, 0.1);
    color: #ff7b00;
    height: 14px;
    min-width: 52%;
    margin-right: 3px;
    margin-bottom: 3px;
  }

  /* 全组 */
  .weight-num {
    font-weight: 600;
  }

  .all-group-yes {
    border-radius: 1px;
    background: rgba(48, 191, 120, 0.1);
    color: #30bf78;
    height: 14px;
    width: 52%;
    line-height: 14px;
    margin-right: 3px;
    margin-bottom: 3px;
  }

  /* 项目经理 */
  .pm-score-yes {
    border-radius: 1px;
    background: rgba(48, 191, 120, 0.1);
    color: #30bf78;
    height: 14px;
    line-height: 14px;
    margin-right: 3px;
    width: 45%;
    margin-bottom: 3px;
  }

  /* 负责人 */
  .ower-score-yes {
    border-radius: 1px;
    background: rgba(48, 191, 120, 0.1);
    color: #30bf78;
    height: 14px;
    line-height: 14px;
    width: 50%;
    margin-right: 3px;
  }

  .all-group-no {
    border-radius: 1px;
    background: rgba(245, 34, 45, 0.1);
    color: #f5222d;
    height: 14px;
    width: 44%;
    line-height: 14px;
    margin-bottom: 3px;
    margin-right: 3px;
  }

  /* 项目经理 */
  .pm-score-no {
    border-radius: 1px;
    background: rgba(245, 34, 45, 0.1);
    color: #f5222d;
    height: 14px;
    line-height: 14px;
    margin-right: 3px;
    width: 45%;
  }

  /* 负责人 */
  .ower-score-no {
    border-radius: 1px;
    background: rgba(245, 34, 45, 0.1);
    color: #f5222d;
    height: 14px;
    line-height: 14px;
    width: 50%;
    margin-right: 3px;
  }

  .count-down-hover {
    color: #262626;
  }

  .count-down-hover > p {
    margin: 0;
  }
  /deep/ .form-content-action .ant3-form-item-label {
    width: 115px;
  }

  .form-content-action {
    display: inline-block;
    width: calc(100% - 80px);
  }
  .bottom-table :deep(.@{ant-prefix}-table-thead) > tr {
    height: 40px;
  }

  .bottom-table :deep(.@{ant-prefix}-table-thead) > tr > th {
    background: #3875ff;
    font-size: 14px;
    font-family: arial, helvetica, 'microsoft yahei';
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid #3875ff;
    padding: 8px 16px;
  }
  .note-table :deep(.@{ant-prefix}-table-thead) > tr {
    height: 40px;
  }

  .note-table :deep(.@{ant-prefix}-table-thead) > tr > th {
    background: #3875ff;
    font-size: 14px;
    font-family: arial, helvetica, 'microsoft yahei';
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid #3875ff;
    padding: 8px 16px;
  }
  .milepost-title {
    height: 25px;
    display: flex;
    line-height: 25px;
    border-left: 4px solid #3875ff;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .bottom-table {
    background-color: #fff;
    padding: 24px;
  }
  .wqd-btn,
  .yq-btn,
  .wc-btn,
  .yqwc-btn,
  .jxz-btn,
  .spz-btn {
    background: #ffffff;
    border-radius: 2px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    letter-spacing: 0;
    text-align: center;
    line-height: 40px;
    font-weight: 400;
    width: 66px;
    height: 22px;
    line-height: 22px;
    margin: 0 auto;
  }

  .wc-btn {
    border: 1px solid rgba(48, 191, 120, 1);
    color: #30bf78;
  }

  .yq-btn {
    border: 1px solid rgba(224, 32, 32, 1);
    color: #e02020;
  }

  .wqd-btn {
    border: 1px solid rgba(140, 140, 140, 1);
    color: #8c8c8c;
  }

  .jxz-btn {
    border: 1px solid rgba(56, 117, 255, 1);
    color: #3875ff;
  }

  .yqwc-btn {
    border: 1px solid rgba(255, 152, 70, 1);
    color: #ff9846;
  }

  .spz-btn {
    border: 1px solid #00b4ec;
    color: #00b4ec;
  }
  .bottom-table {
    height: 100%;
  }
  .extension-color {
    border-radius: 1px;
    background: rgba(89, 89, 89, 0.1);
    color: #595959;
    height: 14px;
    min-width: 51%;
    margin-right: 3px;
    margin-bottom: 3px;
  }

  .count-down-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 5px;
  }

  .count-down-content > div {
    box-sizing: border-box;
    height: 14px;
    text-align: center;
    line-height: 14px;
    font-size: 12px;
  }
  .score-title {
    margin: 2px 2px 12px 2px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #262626;
    letter-spacing: 0;
    font-weight: 500;
  }
  .score-table :deep(.@{ant-prefix}-table-tbody) tr > td {
    font-size: 14px;
    font-family: arial, helvetica, 'microsoft yahei';
    font-weight: 400;
    color: #595959;
    border-bottom: 1px solid #d9d9d9;
    padding: 8px 16px;
    word-break: break-all;

    .cell-wrapper {
      padding: 0 16px;
    }
  }
  .score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
    background: #fafafa;
    font-size: 14px;
    font-family: arial, helvetica, 'microsoft yahei';
    font-weight: 600;
    color: #595959;
    border-bottom: 1px solid #d9d9d9;
    padding: 8px 16px;
  }
  .risk-table :deep(.@{ant-prefix}-table-thead) > tr > th {
    background: #3875ff;
    font-size: 14px;
    font-family: arial, helvetica, 'microsoft yahei';
    font-weight: 600;
    color: #fff;
    padding: 8px 16px;
    border: none;
  }

  .risk-table :deep(.@{ant-prefix}-table-tbody) tr > td {
    font-size: 14px;
    font-family: arial, helvetica, 'microsoft yahei';
    font-weight: 400;
    color: #262626;
    border-bottom: 1px solid #ebebeb;
    padding: 6px 16px;
    word-break: break-all;

    .cell-wrapper {
      padding: 0 16px;
    }
  }
  :deep(.ant3-select-selection-item) {
    max-width: 250px;
  }

  .score-title-first {
    background: rgba(250, 173, 20, 0.1);
    color: #262626;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
  }

  .score-title {
    font-size: 16px;
    color: #262626;
    font-weight: 600;
    margin: 18px 0;
  }

  .score-num {
    font-size: 18px;
    color: #3875ff;
    font-weight: 600;
  }

  .score-num-red {
    color: #f5222d;
    font-weight: 600;
  }

  .score-month {
    font-size: 16px;
    color: #262626;
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 12px;
  }

  .month-score {
    font-size: 16px;
    color: #595959;
    letter-spacing: 0;
    font-weight: 400;
    display: inline-block;
    margin-left: 24px;
  }

  .default-score {
    font-size: 16px;
    color: #262626;
    letter-spacing: 0;
    font-weight: 500;
  }
  .score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
    background: #3875ff;
    font-size: 14px;
    font-family: arial, helvetica, 'microsoft yahei';
    font-weight: 600;
    color: #fff;
    padding: 8px 16px;
    border: none;
  }
  .count-down-content {
    cursor: pointer;
  }
  .tips {
    font-size: 12px;
    color: #8c8c8c;
    letter-spacing: 0;
    margin-top: -15px;
    margin-bottom: 15px;
    margin-left: 115px;
  }
  .finish-standard {
    display: inlie-block;
    min-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  /*样式*/

  .title-new-status {
    height: 62px;
    line-height: 36px;
    padding: 0 16px;
    margin-bottom: 16px;
    background-image: url('@/assets/images/18c5598e33c9488e1925bf0bd3b80ebb.png');
    background-size: cover;
    border: 1px solid #3875ff;
    border-radius: 5px;
  }

  :deep(.ant3-steps-item-container) {
    padding: 0 16px;
  }
  :deep(.ant3-steps-item-tail::after) {
    margin-left: 12px;
    background-color: #3875ff;
  }
  :deep(.ant3-steps-item-description) {
    font-size: 12px;
    color: #595959;
    text-align: left;
    line-height: 20px;
    font-weight: 400;
  }
  :deep(.ant3-steps-item-icon) {
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: #3875ff;
    margin-top: 6px;
  }
  :deep(.ant3-steps-item-title) {
    height: 28px;
    font-size: 14px;
    color: #262626;
    text-align: left;
    line-height: 22px;
    font-weight: 400;
  }
  :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
    background-color: #3875ff;
  }
  :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
    background: #3875ff;
  }
  :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
    border-color: #3875ff;
  }
  :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
    color: #3875ff !important;
  }
  .task-status-new {
    cursor: pointer;
  }
  .left-title,
  .right-title {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    letter-spacing: 0;
    text-align: left;
    font-weight: 400;
    height: 31px;
    line-height: 31px;
  }
  .weight-status {
    font-size: 14px;
    color: #262626;
    letter-spacing: 0;
    font-weight: 500;
  }
  .batch-line {
    width: 100%;
    border-top: 1px solid #d9d9d9;
    margin: 16px 0;
  }
  .weight-status-new {
    font-weight: 600;
    color: #262626;
  }
  .page_root {
    overflow: hidden;
    background-color: #fff;
  }
</style>